<template>
<div>
{{floordata}}	-----
{{fdata}}
<Form :inline="true" :model="form" :label-width="40">
	
	<FormItem label="层数" >
        <Input v-model="form.ceng"></Input>
    </FormItem>

    <FormItem label="户数" >
        <Input v-model="form.hu"></Input>
    </FormItem>

    <Button class="ml10" @click="create">生成楼层</Button>
    <Button class="ml10" @click="clear">清空楼层</Button>
    <Button class="ml10" @click="save">保存数据</Button>
</Form>

<div v-for="(item, index) in floordata" :key="'a' + index" class="mt10">

	<Row>
		<Input v-if="editCeng == index " style="width:60px" size="small"
			v-model="currentCeng" ></Input>
		<div v-else style="width:60px;" class="fl text-center">{{item.name}}</div>

		<template v-if="editCeng == index">
			<Button size="small" class="ml10" @click="saveCeng(index)">保存</Button>
			<Button size="small" class="ml10" @click="cancelCeng(index)">取消</Button>
		</template>
		<Button v-else size="small" class="ml10" @click="updateCeng(index)">修改层名称</Button>

		<Button size="small" class="ml10">插入一层</Button>
		<Button size="small" class="ml10">删除该层</Button>
		<Button size="small" class="ml10">添加一户</Button>
	</Row>
	
	<Row class="mt10">
		<div style="width:160px; height:30px;" v-for="(item1, index1) in item.list" :key="'b' + index1" class="ml10 mt5 fl text-center pointer" >

			<Input v-if="edit.i == index && edit.j == index1" 
			v-model="current" >
				<Button slot="append" icon="ios-checkmark" @click="ok(index, index1, item1)"></Button>
				<Button slot="append" icon="ios-close" @click="close"></Button>
				<Button slot="append" icon="ios-trash-outline" @click="del(index, index1, item1)"></Button>
			</Input>
			<div v-else style="padding-top:6px;" @click="clickhu(index, index1, item1)">{{item1.name}}</div>
		</div>
	</Row>
	
</div>

</div>
</template>

<script>

export default {
	
	name : 'floor',
	
	data () {
		return {

			editCeng : -1,
			currentCeng : '',

			edit : {
				i : -1,
				j : -1,
			},

			current : '',

			form : {
				ceng : 30,
				hu : 6,
			},

		  	floordata : this.fdata,
		}
	},

	props : {
		unit : {
			type : String,
			default : '1',
		},

		fdata : {
			type : Array,
			default : [],
		},
	},

	components : {
		
	},

	computed : {
		// floordata () {
		// 	return this.fdata;
		// }, 

		// floordata : {

		// 	get () {
		// 		return this.fdata;
		// 	},

		// 	set (newValue) {
		// 		this.fdata = newValue;
		// 	},
		// }
	},

	methods : {
		create () {

			this.floordata = [];

			for(let i = 0; i < this.form.ceng; i++){
				let obj = {
					name : (i + 1) + 'F',
					list : [],
				};
				for(let j = 0; j < this.form.hu; j++){
					obj.list.push({
						name : this.unit + '-' + (i + 1) + '-' + (j + 1),
					})
				}
				this.floordata.push(obj);
			}

		},


		clickhu (i, j, item) {

			console.log(i);
			console.log(j);
			console.log(item);

			this.edit.i = i;
			this.edit.j = j;

			this.current = item.name;

		},


		clear () {

			this.edit.i = -1;
			this.edit.j = -1;
			this.current = '';
			this.floordata = [];
		},


		ok (i, j, item) {

			this.floordata[i].list[j].name = this.current;
			this.edit.i = -1;
			this.edit.j = -1;
			this.current = '';
		},


		del (i, j) {
			console.log(i);
			console.log(j);

			this.$Modal.confirm({
                title: '提示',
                content: '删除将无法恢复，确认码？',
                onOk: () => {
                    this.floordata[i].list.splice(j, 1);
                    this.edit.i = -1;
					this.edit.j = -1;
                	this.current = '';
                    
                },
                onCancel: () => {
                }
            });
		},

		close () {
			console.log('close');
			this.edit.i = -1;
			this.edit.j = -1;
			this.current = '';
		},

		save () {
			console.log(this.floordata);
			this.$emit('save', this.floordata);
		},

		//修改层
		updateCeng (i) {
			this.editCeng = i;
			this.currentCeng = this.floordata[i].name;
		},

		saveCeng (i, name) {
			this.floordata[i].name = this.currentCeng;
			this.editCeng = -1;
			this.currentCeng = '';
		},

		cancelCeng () {
			this.editCeng = -1;
			this.currentCeng = '';
		},
	},

	watch : {
	    
	},

	mounted () {
		
	},

}
</script>

<style scoped>
/*.ml10 {
	margin-left: 10px;
}
.mt10 {
	margin-top: 10px;
}
.fl {
	float: left;
}
.text-center {
	text-align: center;
}
.mt5 {
	margin-top: 5px;
}
.pointer {
	cursor: pointer;
}*/
</style>
